<template>
  <view class="flex gap-[20rpx] mt-[20rpx]">
    <view
      class="flex-1 bg-primary h-[148rpx] pl-4 pt-[14rpx] rounded-sm relative"
      v-for="(item, index) in list"
      :key="index"
      @click="handleJump(item.url)"
    >
      <image :src="item.bg" class="absolute top-0 right-0 w-full h-full"></image>
      <view class="relative z-10">
        <view class="text-[44rpx] text-white">{{ item.title }}</view>
        <view class="text-[#A8A8A8] text-xs mt-[20rpx]">{{ item.des }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { to } from '@/utils/navigation'
defineProps({
  list: {
    type: Array,
    required: true,
  },
})

function handleJump(url) {
  to(url)
}
</script>

<style lang="scss" scoped></style>
